<template>
  <div class="branches">
    <div class="app-container">
      <div class="background">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 司机 -->
          <el-tab-pane label="基本信息" name="first">
            <el-form :model="driverForm">
              <div class="form">
                <el-form-item label="员工编码:" label-width="200px">
                  <el-input v-if="driverShow===true" v-model="driverForm.account" disabled medium style="width: 250px;" type="text" />
                  <div v-else style="font-size: 16px; width: 200px;" display="display: inline-block;">{{ driverForm.account }}</div>
                </el-form-item>

                <el-form-item label="司机姓名:" label-width="200px">
                  <el-input v-if="driverShow===true" v-model="driverForm.name" disabled medium type="text" style="width: 250px;" />
                  <div v-else style="font-size: 16px; width: 200px;" display="display: inline-block;">{{ driverForm.name }}</div>

                </el-form-item>

                <el-form-item label="所属机构:" label-width="200px">
                  <el-input v-if="driverShow===true" v-model="driverForm.name" disabled medium type="text" style="width: 250px;" />
                  <div v-else style="font-size: 16px; width: 200px;" display="display: inline-block;">{{ driverForm.agency.name }}</div>

                </el-form-item>

                <el-form-item label="电话:" label-width="200px">
                  <el-input v-if="driverShow===true" v-model="driverForm.mobile" disabled medium type="text" style="width: 250px;" />
                  <div v-else style="font-size: 16px; width: 200px;" display="display: inline-block;">{{ driverForm.mobile }}</div>

                </el-form-item>

                <el-form-item label="年龄:" label-width="200px">
                  <el-input v-if="driverShow===true" v-model="driverForm.age" medium type="text" style="width: 250px;" />
                  <div v-else style="font-size: 16px; width: 200px;" display="display: inline-block;">{{ driverForm.age }}</div>
                </el-form-item>
              </div>
              <div v-if="!driverShow" class="button">
                <el-button type="primary" @click="driverShow=true">编辑</el-button>

              </div>
              <div v-if="driverShow" class="button">
                <el-button type="primary" @click="driverSave">保存</el-button>
                <el-button @click="driverCancel">取消</el-button>
              </div>
            </el-form>

          </el-tab-pane>
          <!-- 司机 -->

          <!-- 驾驶证 -->
          <el-tab-pane label="驾驶证信息" name="second">
            <el-form :model="drivingForm">
              <div class="form">
                <el-form-item label="驾驶证号:" label-width="200px">
                  <el-input v-if="drivingShow===true" v-model="drivingForm.licenseNumber" medium style="width: 250px;" type="text" />
                  <div v-else style="font-size: 16px; width: 250px;" display="display: inline-block;">{{ drivingForm.licenseNumber }}</div>
                </el-form-item>

                <el-form-item label="准驾车型:" label-width="200px">
                  <el-input v-if="drivingShow===true" v-model="drivingForm.allowableType" medium type="text" style="width: 250px;" />
                  <div v-else style="font-size: 16px; width: 250px;" display="display: inline-block;">{{ drivingForm.allowableType }}</div>

                </el-form-item>

                <el-form-item label="初次领证日期:" label-width="200px">
                  <el-date-picker
                    v-if="drivingShow===true"
                    v-model="drivingForm.initialCertificateDate"
                    type="date"
                    placeholder="选择日期"
                    style="width: 250px;"
                  />
                  <div v-else style="font-size: 16px; width:250px;" display="display: inline-block;">{{ drivingForm.initialCertificateDate }}</div>

                </el-form-item>

                <el-form-item label="驾驶证有效期限:" label-width="200px">
                  <el-input v-if="drivingShow===true" v-model="drivingForm.validPeriod" medium type="text" style="width: 250px;">
                    <template slot="append">年</template>
                  </el-input>
                  <div v-else style="font-size: 16px; width: 250px;" display="display: inline-block;">{{ drivingForm.validPeriod }}年</div>
                </el-form-item>

                <el-form-item label="驾龄:" label-width="200px">
                  <el-input v-if="drivingShow===true" v-model.number="drivingForm.driverAge" medium type="text" style="width: 250px;">
                    <template slot="append">年</template>
                  </el-input>
                  <div v-else style="font-size: 16px; width: 250px;" display="display: inline-block;">{{ drivingForm.driverAge }}年</div>
                </el-form-item>

                <el-form-item label="驾驶证类型:" label-width="200px">
                  <el-input v-if="drivingShow===true" v-model="drivingForm.licenseType" medium type="text" style="width: 250px;" />
                  <div v-else style="font-size: 16px; width:250px;" display="display: inline-block;">{{ drivingForm.licenseType }}</div>
                </el-form-item>

                <el-form-item label="从业资格证:" label-width="200px">
                  <el-input v-if="drivingShow===true" v-model="drivingForm.qualificationCertificate" medium type="text" style="width: 250px;" />
                  <div v-else style="font-size: 16px; width: 250px;" display="display: inline-block;">{{ drivingForm.qualificationCertificate }}</div>
                </el-form-item>

                <el-form-item label="入场证信息:" label-width="200px">
                  <el-input v-if="drivingShow===true" v-model="drivingForm.passCertificate" medium type="text" style="width: 250px;" />
                  <div v-else style="font-size: 16px; width: 250px;" display="display: inline-block;">{{ drivingForm.passCertificate }}</div>
                </el-form-item>

                <el-form-item label="图片资格证:" label-width="200px">

                  <div>
                    <el-upload

                      :disabled="!drivingShow"
                      :file-list="defaultFileList"
                      action="#"
                      list-type="picture-card"
                      :before-upload="beforeAvatarUpload"
                      :http-request="onUpload"
                    >
                      <i v-if="drivingShow" slot="default" class="el-icon-upload2">
                        <template>
                          <span style="font-size: 12px;"> 上传图片</span>
                        </template>
                      </i>

                      <i v-if="!drivingShow" slot="default" class="el-icon-circle-close">
                        <template>
                          <span style="font-size: 12px;"> 禁止上传</span>
                        </template>
                      </i>

                      <div slot="file" slot-scope="{file}">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        >
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in" />
                          </span>
                          <span
                            v-if="drivingShow===true"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete" />
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                  </div>

                </el-form-item>

              </div>
              <div v-if="!drivingShow" class="button">
                <el-button type="primary" @click="drivingShow=true">编辑</el-button>

              </div>
              <div v-if="drivingShow" class="button">
                <el-button type="primary" @click="drivingSave">保存</el-button>
                <el-button @click="drivingCancel">取消</el-button>
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getDriverDetails, getdriverLicense, saveDriverApi, saveDriverLicense } from '@/api/driver'
import { filesImageUpload } from '@/utils'

export default {
  data() {
    return {
      defaultFileList: [], // 设置默认文件列表，包含两张图片的信息
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      // ================
      linksArray: [], // 图片数组
      drivingShow: false, // 驾驶证编辑
      drivingForm: {
        allowableType: '', // 准驾车型
        driverAge: 0, // 驾龄
        id: 0,
        initialCertificateDate: '', // 初次领证日期
        licenseNumber: '', // 驾驶证号
        licenseType: '', // 驾驶证类型
        passCertificate: '', // 入场证信息
        picture: '', // 图片
        qualificationCertificate: '', // 从业资格证信息
        userId: 0, // 司机id
        validPeriod: ''// 有效期限
      }, // 驾驶证列表
      driverShow: false,
      activeName: 'first',
      driverForm: {
        avatar: '', // 头像
        account: '',
        name: '',
        agency: {
          name: ''
        },
        mobile: '',
        age: ''
      } // 司机列表
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    // tab栏
    handleClick(tab) {
      if (tab.index === '1') {
        this.getDrivingForm()
      } else {
        this.getDetails()
      }
    },
    // 司机基本信息
    async getDetails() {
      const res = await getDriverDetails(this.$route.params.id)
      console.log(res)
      this.driverForm = res.data
      this.driverForm.newAge = res.data.age
      this.drivingForm.userId = res.data.userId
    },
    // 司机-取消
    driverCancel() {
      // 恢复原本数据
      // console.log(this.driverForm)
      this.driverForm.age = this.driverForm.newAge
      this.driverShow = false
    },
    // 司机-保存
    async driverSave() {
      await saveDriverApi(this.driverForm, this.$route.params.id)
      this.$message.success('保存成功')
      // console.log(res)
      // 关闭
      this.driverShow = false
    },
    // 驾驶证-列表
    async getDrivingForm() {
      const res = await getdriverLicense(this.drivingForm.userId)
      console.log('驾驶证-列表', res.data)
      // console.log(res.data.picture)
      this.drivingForm = res.data
      if (res.data.picture) {
        const linksArray = res.data.picture.split(',').map(link => link.trim())
        this.defaultFileList = linksArray.map(link => ({ url: link }))
        // 存旧数据-图片
        this.drivingForm.newpicture = linksArray.map(link => ({ url: link }))
      }
      // 存旧数据
      this.drivingForm.newallowableType = res.data.allowableType
      this.drivingForm.newdriverAge = res.data.driverAge
      this.drivingForm.newinitialCertificateDate = res.data.initialCertificateDate
      this.drivingForm.newlicenseNumber = res.data.licenseNumber
      this.drivingForm.newlicenseType = res.data.licenseType
      this.drivingForm.newpassCertificate = res.data.passCertificate
      this.drivingForm.newqualificationCertificate = res.data.qualificationCertificate
      this.drivingForm.newvalidPeriod = res.data.validPeriod
      // 图片
    },
    // 驾驶证-取消
    drivingCancel() {
      // 恢复数据
      this.drivingForm.allowableType = this.drivingForm.newallowableType
      this.drivingForm.driverAge = this.drivingForm.newdriverAge
      this.drivingForm.initialCertificateDate = this.drivingForm.newinitialCertificateDate
      this.drivingForm.licenseNumber = this.drivingForm.newlicenseNumber
      this.drivingForm.licenseType = this.drivingForm.newlicenseType
      this.drivingForm.passCertificate = this.drivingForm.newpassCertificate
      this.drivingForm.qualificationCertificate = this.drivingForm.newqualificationCertificate
      this.drivingForm.validPeriod = this.drivingForm.newvalidPeriod
      //  图片
      this.defaultFileList = this.drivingForm.newpicture
      // 关闭
      this.drivingShow = false
    },
    // 驾驶证-保存
    async drivingSave() {
      delete this.drivingForm.newallowableType
      delete this.drivingForm.newdriverAge
      delete this.drivingForm.newinitialCertificateDate
      delete this.drivingForm.newlicenseNumber
      delete this.drivingForm.newlicenseType
      delete this.drivingForm.newpassCertificate
      delete this.drivingForm.newqualificationCertificate
      delete this.drivingForm.newvalidPeriod
      delete this.drivingForm.newpicture
      // 图片
      // console.log(this.defaultFileList)
      if (this.defaultFileList[1].url) {
        this.drivingForm.picture = this.defaultFileList[0].url + ',' + this.defaultFileList[1].url
      } else {
        this.drivingForm.picture = this.defaultFileList[0].url
      }
      this.drivingForm.id = Number(this.drivingForm.id)
      this.drivingForm.userId = Number(this.drivingForm.userId)
      console.log('表单', this.drivingForm)
      const res = await saveDriverLicense(this.drivingForm)
      console.log('保存成功', res)
      this.getDrivingForm()
      this.$message.success('保存成功')
      this.drivingShow = false
    },
    // ======================
    // 上传-删除图片
    handleRemove(file) {
      // 移除
      const index = this.defaultFileList.findIndex(obj => file.url === obj.url)
      if (index !== -1) {
        this.defaultFileList.splice(index, 1)
      }
    },
    // 上传-查看图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传-检验
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('支持扩展名：.jpeg .png .jpg')
      }
      if (!isLt2M) {
        this.$message.error('上传大小不能超过 5MB!')
      }
      if (this.defaultFileList.length === 2) {
        this.$message.error('最多上传两张照片!')
        return false
      }
      return isJPG && isLt2M
    },
    // 上传
    async onUpload(e) {
      const formData = new FormData()
      formData.append('file', e.file)
      // console.log(formData)
      const res = await filesImageUpload(formData)
      this.defaultFileList.push({ url: res.data })
      // console.log(res.data)
    }
  }
}
</script>

  <style>
  .branches{
    margin-left: 20px;
    margin-right: 20px;
  }
  .background{
    background: #ffffff;
    margin-top: 25px;
    height: 700px;
    padding: 30px;
  }
  .el-form-item__label {
    font-size: 18px;
    font-weight: normal;
  }
  .form{
    width: 100%;
display: flex;
flex-wrap: wrap
}
.el-tabs__item{
font-size: 24px;
}
.button{
  margin-top: 200px;
  text-align: center;

}
.img2{
  width: 212px;
  height: 159px;
}
.img3{
  display: flex;;
}
  </style>

